<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            display: flex;
        }

        .list {
            width: 1000px;
            /* margin: 0 auto; */
            display: flex;
            flex-wrap: wrap;
            border: 1px solid #999;
        }

        .box1 {
            width: 500px;
            border: solid 1px #999;
            margin-left: 30px;
        }

        .item {
            width: 240px;
            margin-left: 10px;
            transition: all 0.5s;
            margin-bottom: 20px;
        }

        .item:hover {
            cursor: pointer;
        }

        .item img {
            width: 100%;
        }

        .item button {
            width: 200px;
            height: 50px;
            background: red;
            color: #fff;
        }



        /* .item .price {
            font-size: 22px;
            color: firebrick;
        } */

        /* .item .price::before {
            content: "¥";
            font-size: 14px;
        } */
    </style>
</head>

<body>
    <div class="box">
        <div class="list"></div>
        <div class="box1">
            <div class="title">购物车(0)</div>
            <div class="list1">
                <!-- 渲染购物车列表到这里 -->
            </div>
            <div class="summary">总价:0</div>

        </div>

    </div>
</body>

</html>
<script>
    const goodsList = [{
            picture: "./img/1.png",
            name: '高级办公椅',
            price: 1000
        },
        {
            picture: "./img/1.png",
            name: '高级按摩椅',
            price: 2000
        },
        {
            picture: "./img/1.png",
            name: '高级电动按摩椅',
            price: 100
        },
        {
            picture: "./img/1.png",
            name: '电动按摩椅',
            price: 8000
        },
        {
            picture: "./img/1.png",
            name: '老板椅',
            price: 100
        },
        {
            picture: "./img/1.png",
            name: '办公桌',
            price: 1000
        },
        {
            picture: "./img/1.png",
            name: '可升降办公桌',
            price: 2000
        },
        {
            picture: "./img/1.png",
            name: '可升降办公桌',
            price: 5000
        },

    ];

    function render(arr) {
        let str = "";
        // 遍历数组
        arr.forEach((item) => {
            // 解构
            const {
                name,
                price,
                picture
            } = item;
            str += `
    <div class="item">
      <img src=${picture} alt="">
      <p class="name">${name}</p>
      <p class="price">${price}</p>
      <button>添加购物车</button>
    </div>
    `;
        });
        // 追加给list
        document.querySelector(".list").innerHTML = str;
    }
    render(goodsList); //页面一打开就需要渲染

    var arr = [{
            pic: "img/2.png",
            name: "高级办公椅",
            price: 10000,
            count: 1
        },
        {
            pic: "img/2.png",
            name: "高级办公椅",
            price: 10000,
            count: 1
        }, {
            pic: "img/2.png",
            name: "高级办公椅",
            price: 10000,
            count: 1
        },
    ];

    //render方法 渲染商品列表, 渲染商品数量, 渲染总价
    function render1() {

        //1.渲染商品列表
        var htmlStr = newarr
            .map((item, index) => {
                return `<div class="good">
                    <input type="checkbox">

                            <img src="${item.pic}" alt="" class="img1">
                            <span class="price">${item.price}</span>

                            <div class="name">${item.name}</div>
                            <div class="opt">
                                <button class="jian">-</button>
                                <span>${item.count}</span>
                                <button class="jia">+</button>
                            </div>
                            <button class="del">删除收藏</button>
                        </div>`;
            })
            .join("");


        document.querySelector(".list1").innerHTML = htmlStr;

        //2.渲染商品数量
        //2.1计算商品数量
        // var count = 0;
        /* arr.forEach((item)=>{
                    count += item.count
                }) */
        var count = newarr.reduce((t, item) => {
            return t + item.count;
        }, 0);
        //2.2渲染商品数量
        document.querySelector(".title").innerHTML = `购物车(${count})`;

        //3.渲染总价
        //3.1 计算总价
        var price = newarr.reduce((t, item) => {
            return t + item.count * item.price;
        }, 0);
        //3.2 渲染总价
        document.querySelector(".summary").innerHTML = `总价:(${price})`;
    }

    var handler = {
        set(target, key, value) {
            console.log("set");
            target[key] = value;
            render1();
            // return Reflect.set(target,key,value);
        },
        get(target, key) {
            if (typeof target[key] === "object" && target[key] !== null) {
                return new Proxy(target[key], handler);
            }
            return target[key];
            // return Reflect.get(target,key);
        },
    };
    var newarr = new Proxy(arr, handler);

    render1();
</script>